<template>
	<view class="c-input-box" :style="[...inpitStyle]">
		<view class="label" :style="[...labelStyle]" :class="{ required: rules.isVerify }">
			{{label}}
		</view>
		<view class="boxs">

			<view class="c-input" :class="ggclass" :style="{
			        width,
			        height: heights,
			        padding,
			        borderRadius: radiuss,
			        borderColor: borderShow ? focusBorderColors : borderColors,
			        borderStyle: borderStyles,
			        border,
			        borderLeft: isBorders ? '' : 'transparent',
			        borderRight: isBorders ? '' : 'transparent',
			        borderTop: isBorders ? '' : 'transparent',
			        background: computedBgColor,
			    }">
				<view class="defaultView" v-if="$slots.default" :style="{'justify-content':slotJcs}">
					<slot>

					</slot>
				</view>
				<view class="input-box" v-else>
					<view class="before" v-if="$slots.before">
						<slot name="before"></slot>
					</view>
					<input :focus="isfocus" class="input" v-if="type === 'text'" placeholder-class="placeholder"
						type="text" v-model="val" :placeholder="hint" :maxlength="maxlength" @focus="focus" @blur="blur"
						@input="oninput" @change="onchange" :style="{textAlign:textAligns}" :disabled="disabled"
						:confirm-type="confirmType" @confirm="confirm" :adjust-position="adjustPosition"
						@keyboardheightchange="keyboardheightchange" />
					<view class="password-box" v-if="type === 'password'">
						<input :focus="isfocus" class="input" placeholder-class="placeholder"
							:type="isShow ? 'text' : 'password'" v-model="val" :placeholder="hint"
							:maxlength="maxlength" @focus="focus" @blur="blur" @input="oninput" @change="onchange"
							:style="{textAlign:textAligns}" :disabled="disabled" :confirm-type="confirmType"
							@confirm="confirm" :adjust-position="adjustPosition"
							@keyboardheightchange="keyboardheightchange" />
						<text v-if="eye" class="iconfont" :class="isShow ? 'icon-zhengyan' : 'icon-biyan'"
							@click="eyechange"></text>
					</view>

					<input :focus="isfocus" class="input" v-if="type === 'number'" placeholder-class="placeholder"
						type="number" v-model.number="val" :placeholder="hint" :maxlength="maxlength" @focus="focus"
						@blur="blur" @input="oninput" @change="onchange" :style="{textAlign:textAligns}"
						:disabled="disabled" :confirm-type="confirmType" @confirm="confirm"
						:adjust-position="adjustPosition" @keyboardheightchange="keyboardheightchange" />

					<input :focus="isfocus" class="input" v-if="type === 'nickname'" placeholder-class="placeholder"
						type="nickname" v-model.number="val" :placeholder="hint" :maxlength="maxlength" @focus="focus"
						@blur="blur" @input="oninput" @change="onchange" :style="{textAlign:textAligns}"
						:disabled="disabled" :confirm-type="confirmType" @confirm="confirm"
						:adjust-position="adjustPosition" @keyboardheightchange="keyboardheightchange" />

					<textarea :focus="isfocus" v-if="type === 'textarea'" class="input textarea"
						placeholder-class="placeholder" :placeholder="hint" v-model="val" :maxlength="maxlength"
						@focus="focus" @blur="blur" @input="oninput" @change="onchange" :style="{textAlign:textAligns}"
						:disabled="disabled" :confirm-type="confirmType" @confirm="confirm"
						:adjust-position="adjustPosition" @keyboardheightchange="keyboardheightchange" />


				</view>
				<view class="after" v-if="$slots.after">
					<slot name="after"></slot>
				</view>
			</view>
			<view class="error" v-if="isError">{{ rules.hint || '请输入' }}</view>
		</view>

	</view>

</template>

<script>
	import propsMixin from '../mixins/props/index.js'
	export default {
		mixins: [propsMixin],
		name: "c-input",
		inject: {
			elForm: {
				default: {},
			},
			elFormItem: {
				default: {},
			},
			cForm: {
				default: {}
			}
		},
		provide() {
			return {
				Cinput: this
			}
		},
		props: {
			confirmType: { //键盘下面的按钮类型 send-“发送” search-“搜索” next-“下一个”	 go	-“前往”	done-“完成”
				type: String,
				default: 'done'
			},
			type: { //输入框类型
				type: String,
				default: "text",
			},
			textAlign: { //文字排列方式
				type: String,
				default: "",
			},
			hint: { //占位文字
				type: String,
				default: "请输入",
			},
			maxlength: { //最大输入文字数量 -1 为不限制
				type: Number,
				default: -1,
			},
			value: { //输入框值
				type: [String, Number, Boolean, Object],
				default: "",
			},
			eye: { //看密码的眼睛
				type: Boolean,
				default: false,
			},
			width: { //宽度
				type: String,
				default: "",
			},
			height: { //高度
				type: String,
				default: "",
			},
			padding: { //内边距
				type: String,
				default: "",
			},
			radius: { //圆角
				type: String,
				default: "",
			},
			borderColor: { //边框颜色
				type: String,
				default: "",
			},
			focusBorderColor: { //聚焦边框颜色
				type: String,
				default: "",
			},
			isBorder: { //是否带边框
				type: [String, Boolean],
				default: "",
			},
			borderStyle: { //边框样式
				type: String,
				default: "",
			},
			disabled: { //是否禁用
				type: Boolean,
				default: false,
			},
			adjustPosition: { //键盘弹起时，是否自动上推页面
				type: Boolean,
				default: true
			},
			label: {
				type: String,
				default: '',
			},
			labelPosition: {
				type: String,
				default: ''
			},
			labelWidth: {
				type: String,
				default: ''
			},
			rule: { //验证对象 {isVerify:true,hint:'请输入'，fun:()=>{}}
				type: [Object, String],
				default: () => {
					return {}
				}
			},
			isfocus: { //是否聚焦
				type: Boolean,
				default: false
			},
			slotJc: { //插槽排列方式
				type: String,
				default: ''
			},
		},
		data() {
			return {
				// isfocus: false,
				isShow: false,
				borderShow: false,
				isError: false,
				isopenP: false,
				rules: {},
			};
		},
		watch: {
			rule: {
				handler(n) {
					if (!n) return
					this.rules = n
					console.log(n, 'nnnnnnn')
					if (typeof n === 'string') {
						n = JSON.parse(n)
					}
					if (this.cForm.pushInputVerify && this.rules.isVerify) {
						this.cForm.pushInputVerify(this.verify)
					}
				},
				deep: true,
				immediate: true
			}
		},
		mounted() {
			// if(this.isfocus){}
			this.isopenP = this.cForm?.isOpenPattern || this.isOpenPattern
			console.log(this.$slots, '----')

		},
		computed: {
			val: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit("input", val);
				},
			},
			borderColors() {
				return this.borderColor || this.$inputStyle.borderColor;
			},
			focusBorderColors: {
				get() {
					if (this.isError) {
						setTimeout(() => {
							this.borderShow = true
						}, 200)
						return 'red'

					}
					let a = this.$inputStyle.focusBorderColor || this.$color.main;
					return this.focusBorderColor || a;
				}

			},
			isBorders() {
				let a = this.isBorder === "" ? (this.$inputStyle || {}).isBorder : this.isBorder;
				return this.isBorder || a;
			},
			radiuss() {
				if (!this.isBorders) return "0rpx";
				return this.radius || (this.$inputStyle || {}).radius;
			},
			borderStyles() {
				return this.borderStyle || (this.$inputStyle || {}).borderStyle;
			},
			computedBgColor() {
				// console.log(this.isopenP,'this.isOpenPattern')
				if (this.isopenP) {
					return this.$color.theme.inputBgColor || this.background || (this.$inputStyle || {}).background;
				}
				return this.background || (this.$inputStyle || {}).background;
			},
			heights() {
				return this.height || (this.$inputStyle || {}).height;
			},
			poss() {
				return this.labelPosition || (this.cForm || {}).labelPosition
			},
			labelStyle() {
				let m = '10rpx'
				let params = {}
				if (this.poss === 'top') {
					params.marginBottom = m
				} else {
					params.marginRight = m
				}
				params.width = this.labelWidth || this.cForm.labelWidth
				params.color = this.computedColor
				return params
			},
			inpitStyle() {
				let params = {}
				params.width = '100%'
				params.display = 'flex'
				if (this.poss === 'top') {
					params.flexDirection = 'column'
				} else {
					params.alignItems = 'center'
					params.flexDirection = 'row'
				}
				return params
			},
			slotJcs() {
				return this.slotJc || (this.cForm || {}).slotJc
			},
			textAligns() {
				return this.textAlign || (this.cForm || {}).textAlign
			},
		},
		methods: {
			keyboardheightchange(e) {
				if (!this.adjustPosition) {
					this.$bus.$emit('keyHeight', e.target.height)
				}
			},
			eyechange() {
				this.isShow = !this.isShow;
			},
			focus(e) {
				// this.isfocus = true
				this.borderShow = true;
				this.$emit('focus', e.target.value)
			},
			blur(e) {
				// this.isfocus = false
				this.borderShow = false;
				this.$emit('blur', e.target.value)
				this.verify()
			},
			oninput(e) {
				this.$emit("input", e.target.value);
			},
			onchange(e) {
				this.val = e.target.value
				this.$emit("change", e.target.value);
			},
			confirm(e) {
				this.$emit('confirm', e.target.value)
			},
			verify() {
				if (this.rules.isVerify) {
					if (this.rules.fun) {
						this.rules.fun(this.val, res => {
							if (typeof res === 'boolean') {
								this.isError = !res
							} else {
								console.log(res, 'res')
								this.isError = !!res
								this.rules.hint = res
							}
						})
					} else if (this.rules.mode === 'pattern') {
						let re = new RegExp(this.rules.pattern)
						if (re.test(this.val)) {
							this.isError = false
						} else {
							this.isError = true
						}
					} else if (this.rules.mode === 'len') {
						if ((this.val||'').length > this.rules.len) {
							this.isError = true
						} else {
							this.isError = false
						}
					} else if (this.rules.mode === 'max') {
						if ((this.val||'').length > this.rules.max) {
							this.isError = true
						} else {
							this.isError = false
						}
					} else if (this.rules.mode === 'min') {
						if ((this.val||'').length < this.rules.min) {
							this.isError = true
						} else {
							this.isError = false
						}
					} else {
						this.isError = this.val === '' || this.val === null || this.val === undefined
					}
					return this.isError
				}
				return true
			},
		},
	};
</script>

<style lang="scss" scoped>
	.error {
		color: red;
		font-size: 24rpx;
	}

	.required::after {
		content: '*';
		color: red;
	}

	.c-input-box {}

	.placeholder {
		font-size: 28rpx;
		color: grey;
	}

	.boxs {
		display: flex;
		flex-direction: column;
		// align-items: center;
		justify-content: center;
		width: 100%;
	}

	.c-input {
		// flex: 1;
		width: 100%;
		height: 70rpx;
		border: solid 2rpx #ccc;
		border-radius: 10rpx;
		padding: 0 20rpx 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.defaultView {
			width: 100%;
			height: 100%;
			display: inline-flex;
			align-items: center;
		}

		.input-box {
			flex: 1;
			display: flex;
			align-items: center;
			height: 100%;

			.before {
				margin-right: 10rpx;
			}

			.input {
				flex: 1;
				font-size: 28rpx;
				height: 100%;
			}

			.textarea {
				box-sizing: border-box;
				padding: 20rpx 0;
			}
		}

		.after {
			margin-left: 10rpx;
		}
	}

	.password-box {
		flex: 1;
		display: flex;
		align-items: center;
		height: 100%;

		.iconfont {
			width: 80rpx;
			height: 50rpx;
			display: inline-flex;
			justify-content: flex-end;
			align-items: center;
		}
	}
</style>